﻿@{
    ViewData["Title"] = "Contact";
}

<div id="spanContainer" style="width:400px;height:200px;border:solid 1px #ccc;">

</div>
@Html.TextBox("UserName","张三")
<div id="listLayerClass">
    <span class="drag draggable">语文</span>
</div>
@section script{
    <script src="~/js/plugins/easyui/jquery.easyui.min.js"></script>
    <script src="~/js/plugins/easyui/easyui-lang-zh_CN.js"></script>
    <link href="~/js/plugins/easyui/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/js/plugins/easyui/themes/icon.css" rel="stylesheet" />
    <script type="text/javascript">
        $(function () {

            $('#listLayerClass .drag').draggable({
                //cursor:'move',
                proxy: 'clone',
                revert: true,
                disabled: false
            })

            $('#spanContainer').droppable({
                onDragEnter: function (e, source) {

                    console.log("onDragEnter")
                    $(this).addClass('over');
                    console.log(this)
                    console.log(e)
                    console.log(source)
                },
                onDragLeave: function (e, source) {
                    console.log("onDragLeave")
                    $(this).removeClass('over');
                    console.log(this)
                    console.log(e)
                    console.log(source)

                },
                onDrop: function (e, source) {
                    console.log("onDrop")
                    console.log(e)
                    console.log(source)

                    $(this).append(source)

                },
                //onDragOver: function (e, source) {
                //    console.log("onDragOver")
                //    console.log(e)
                //    console.log(source)

                //}

            })

        })
    </script>
}
<style>    .drag {
        padding: 3px;
        border: solid 1px #ccc;
        cursor: pointer;
    }</style>
